<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <include file="Pub:style"/>
    <style>
        @font-face{
            font-family: myttf;
            src: url("__PUBLIC__/fonts/Kim's GirlType.ttf");
        }
        .box{
            height: 100%;
            border: 1px solid black;
            margin: 7px;
        }
        .chartbox{
            height: 100%;
            overflow:hidden;
            margin-bottom:10px;
        }
        .chartbox .title{
            height: 50px;
            border-bottom: 1px solid #e8e8e8;
            font-size: 16px;
            /* line-height: 50px; */
            font-weight: 700;
            font-family: myttf;
            padding: 20px;
        }
    </style>
</head>
<body>
    <include file="Pub:nav"/>
    <div class="body">
        <div class="box">
            <div class="chartbox">
                <div class="title">
                    您目前所在的位置 > 首页
                </div>
            </div>
            <div class="chartbox">
                <div id="tu1" class="col-xs-6" style="height:400px;">
                </div>
                <div id="tu2" class="col-xs-6" style="height:400px;">
                
                </div>
            </div>
            <div class="chartbox">
                <div class="col-xs-6">
                    <div style="box-shadow: darkgrey 1px 2px 5px 0px;padding:20px;background-color: #f0f0f0;">
                        <h4>用户总数: <#$userall#> 人</h4>
                        <h4>近期活跃用户数(30天内上线): <#$userhy#> 人</h4>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div style="box-shadow: darkgrey 1px 2px 5px 0px;padding:20px;background-color: #f0f0f0;">
                        <h4>商品总数: <#$goodsall#> 件</h4>
                        <h4>商品成交数: <#$goodsok#> 件</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var users = <#:json_encode($users)#>;
    console.log(users);
    var goods = <#:json_encode($goods)#>;
    console.log(goods);


    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('tu1'));
    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: '新增用户量',
            x:'center',
            top:20
        },
        tooltip: {},
        legend: {
            data:['用户数'],
            x: 'left',
            top:20
        },
        xAxis: {
            data: users.time
        },
        yAxis: {},
        series: [{
            name: '用户数',
            type: 'line',
            data: users.count
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);

    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('tu2'));
    // 指定图表的配置项和数据
    var option2 = {
        title: {
            text: '新增商品',
            x:'center',
            top:20
        },
        tooltip: {},
        legend: {
            data:['商品数'],
            x: 'left',
            top:20
        },
        xAxis: {
            data: goods.time
        },
        yAxis: {},
        series: [{
            name: '商品数',
            type: 'line',
            data: goods.count
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);

    window.onresize = function(){

        myChart1.resize();
        myChart2.resize();
        // myChart3.resize();
        // myChart4.resize();
        // myChart5.resize();

    }
</script>
</html>